<template>
  <div class="pagss">


    <div class="panel-group2">
      <div class="">
        <div class="  " style=" width: 100%;">

          <div class="mb10 row_a_c space-between" style=" width: 100%;">

            <div>
              <!-- <el-button @click="cut_show=1;" :class="[cut_show ==1 ? 'pitch' : '']">区服列表</el-button>
              <el-button @click="cut_show=3" :class="[cut_show ==3 ? 'pitch' : '']">工具服列表</el-button> -->


              <el-button @click="qfgjfqh(1);" :class="[cut_show ==1 ? 'pitch' : '']">区服列表</el-button>
              <el-button @click="qfgjfqh(3);" :class="[cut_show ==3 ? 'pitch' : '']">工具服列表</el-button>
            </div>


            <div v-if="cut_show ==1">
              <el-button @click="handleAdd" class=" " :disabled="loading_mysql" v-if="cut_show ==1">新增区服</el-button>
              <el-button icon="el-icon-refresh" @click="qfsx()" v-if="cut_show ==1">刷新</el-button>
            </div>

            <div v-if="cut_show ==3">
              <el-button v-if="cut_show ==3" @click="handleTestBut" class="">配置工具服</el-button>
              <el-button icon="el-icon-refresh" @click="resetQuery" v-if="cut_show ==3">刷新</el-button>
            </div>

          </div>
          <!-- 666666666666666666666666666666666666++++++++++++++++++ -->
          <div v-if="open" class="row">
            <div class="row">
              <el-form ref="form" :model="form" :rules="rules" :inline="true" label-width="100px">

                <el-form-item label="区服名" prop="title">
                  <el-input v-model="form.title" placeholder="请输入区服名" disabled />
                </el-form-item>

                <el-form-item label="serverIp" prop="serverIp">
                  <el-input v-model="form.serverIp" placeholder="请输入IP" />
                </el-form-item>

                <el-form-item label="引擎版本" prop="teacher_id">
                  <el-select v-model="form.engineVersion" placeholder="请选择引擎版本" style="width: 200px;">
                    <el-option v-for="item in engineList" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="端口" prop="port">
                  <el-input v-model="form.port" placeholder="请输入端口" />
                </el-form-item>

                <el-form-item label="备注" prop="remark">
                  <el-input :rows="1" v-model="form.remark" type="textarea" placeholder="请输入内容" style="width: 200px;"></el-input>
                </el-form-item>


              </el-form>
            </div>
            <div class="dialog-footer" style="margin-left: 50px;width: 350px;">
              <el-button :disabled="loading" type="primary" class="color_b_3FC1C9" @click="submitForm">确 定</el-button>
              <el-button @click="cancel">取 消</el-button>
            </div>
          </div>

          <!-- 666666666666666666666666666666666666666========================== -->

          <div v-if="openTest" class="" style="margin-top: 30px;margin-bottom: 50px;">

            <div class="row">
              <div class="row">
                <el-form ref="formtest" :model="formtest" :rules="rulestest" :inline="true" label-width="125px">

                  <el-form-item label="登录器名称" prop="title" class="mcc mr5">
                    <el-input disabled v-model="formtest.title" placeholder="请输入登录器名称" />
                  </el-form-item>

                  <!--  <el-form-item label="登录器类型" prop="platform" class="mr5">
                    <el-radio-group v-model="formtest.platform" @input="seltype">
                      <el-radio :label="0">PC</el-radio>
                      <el-radio v-if="userId==10001" :label="1">Android</el-radio>
                    </el-radio-group>
                  </el-form-item> -->



                  <el-form-item label="登录器类型" class="mr5">
                    <el-select v-model="formtest.platform" placeholder="请选择" clearable style="width: 200px;" @change="seltype">
                      <el-option v-for="item in dljlx" :key="item.value" :label="item.label" :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>

                  <el-form-item label="登录器版本号" prop="version" class="mr5">
                    <el-select v-model="formtest.version" placeholder="请选择" @focus="tsq()" style="width: 200px;">
                      <el-option v-for="item in bbhList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                    </el-select>
                  </el-form-item>

                  <el-form-item label="游戏id" class="mr5">
                    <el-select v-model="formtest.game" placeholder="请选择" clearable style="width: 200px;">
                      <el-option v-for="item in tableData" :key="item.ulid" :label="item.title" :value="item.ulid">
                      </el-option>
                    </el-select>
                  </el-form-item>

                  <el-form-item label="当日剩余生成次数" prop="port">
                    <el-input v-model="count" disabled placeholder="" />
                  </el-form-item>



                </el-form>

              </div>
              <div style="margin-left: 50px;width: 350px;">
                <el-button :disabled="loading" type="primary" @click="submitFormTest" class="color_b_3FC1C9">确 定</el-button>
                <el-button @click="handleClose">取 消</el-button>
              </div>
            </div>

            <div style="color: red;margin-bottom: 5px;font-size: 18px;">重要提醒:</div>
            <div class="color_3FC1C9 "><i class="el-icon-warning-outline mr_5"></i>若不选择游戏ID，则默认显示所有区服列表，若选择了游戏ID，则仅显示该游戏ID的区服列表。</div>
            <div class="color_3FC1C9 "><i class="el-icon-warning-outline mr_5"></i>生成的工具服（包括不限于电脑端、安卓端、苹果端）仅用于测试或者演示，未经许可不得直接用于发行，否则造成的责任自负，并追究相关法律责任。</div>


          </div>

        </div>



      </div>


      <!-- 新增工具服+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
      <div v-show="cut_show==1">
        <el-table :data="tableData" style="width: 100%" v-loading="loading">
          <el-table-column type="index" width="50">
          </el-table-column>
          <el-table-column prop="title" label="区服名">
          </el-table-column>

          <el-table-column prop="ip" label="IP"></el-table-column>
          <el-table-column prop="port" label="端口"></el-table-column>

          <el-table-column prop="engine_version" label="引擎版本">
            <template slot-scope="scope">
              {{ scope.row.engine_version.title }}
            </template>
          </el-table-column>



          <!-- <el-table-column label="状态" prop="state">
            <template slot-scope="scope">
              <div v-if="scope.row.state==1">启用</div>
              <div v-if="scope.row.state==0">停用</div>
            </template>
          </el-table-column> -->



          <el-table-column prop="remark" label="备注">
          </el-table-column>



          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" style="background: #3FC1C9;" @click="handleUpdate(scope.row)">更新</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="center ">
          <pagination v-show="total>0" :total="total" :page.sync="queryParams.noPage" :limit.sync="queryParams.pageSize" @pagination="getList" />
        </div>
      </div>
      <!-- 新增工具服=============================================================================================================== -->

      <!-- 下载pc登录器+++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
      <div v-show="cut_show==3 || cut_show==2">
        <el-table :data="tableDataPc" style="width: 100%" v-loading="loading">
          <el-table-column type="index" width="50">
          </el-table-column>
          <el-table-column prop="ulid" label="ID" header-align="center" align="center">
          </el-table-column>

          <el-table-column prop="title" label="登录器名" header-align="center" align="center">
          </el-table-column>

          <el-table-column prop="game" label="游戏ID" header-align="center" align="center">
            <template slot-scope="scope">
              <div>{{scope.row.game.ulid}}</div>
            </template>
          </el-table-column>

          <el-table-column prop="game" label="游戏名" header-align="center" align="center">
            <template slot-scope="scope">
              <div>{{scope.row.game.title}}</div>
            </template>
          </el-table-column>



          <el-table-column prop="platform" label="登录器类型" header-align="center" align="center">
            <template slot-scope="scope">
              <div v-if="scope.row.platform==0">PC</div>
              <div v-if="scope.row.platform==1">ANDROID</div>
            </template>
          </el-table-column>

          <el-table-column prop="engine_version" label="登录器版本号" header-align="center" align="center">
            <template slot-scope="scope">
              {{ scope.row.lander_version.title }}
            </template>
          </el-table-column>

          <el-table-column label="进度" header-align="center" align="center">

            <template slot-scope="scope">
              <el-button v-if="scope.row.state==1" size="mini" type="warning" :loading="true"></el-button>
              <el-button v-if="scope.row.state==2" type="success" icon="el-icon-check" circle></el-button>
              <el-button v-if="scope.row.state==3" type="danger" icon="el-icon-close" circle></el-button>
              <el-button v-if="scope.row.state==0" size="mini" type="primary" style="background: #3FC1C9;">禁用</el-button>
            </template>

          </el-table-column>

          <el-table-column prop="created_at" label="生成时间" header-align="center" align="center"></el-table-column>

          <el-table-column label="操作" width="240" header-align="center" align="center">
            <template slot-scope="scope">

              <el-button v-if="scope.row.state==1" size="mini" type="primary" style="background: #3FC1C9;">生成中</el-button>
              <el-button v-if="scope.row.state==2" size="mini" type="primary" style="background: #3FC1C9;" @click="handleDownload(scope.row)">点击下载</el-button>
              <el-button v-if="scope.row.state ==2" size="mini" type="primary" @click="renewalBut(scope.row)">更新</el-button>
              <el-button v-if="scope.row.state !=1" size="mini" type="danger" @click="handleDeleteCsdlq(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="center ">
          <pagination v-show="totalPc>0" :total="totalPc" :page.sync="queryParamsPc.noPage" :limit.sync="queryParamsPc.pageSize" @pagination="getPcList" />
        </div>
      </div>
      <!-- 下载pc登录器================================================================================= -->


    </div>



    <el-dialog center title="更新登录器" :visible.sync="loggerShow" width="1100px" style="margin-top: 50px;" append-to-body>
      <el-form ref="form" :model="formLogger" label-width="160px">
        <el-form-item label="登录器版本" prop="type">
          <el-select v-model="formLogger.version" placeholder="请选择登录器版本">
            <el-option v-for="item in bbhList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer center">
        <div class="quxiao"><el-button style="width: 200px;height: 40px;margin-right: 30px;" @click="loggerShow=false">取
            消</el-button></div>
        <el-button style="width: 200px;height: 40px;" type="primary" @click="loggerUpdateSut">确 定</el-button>
      </div>
    </el-dialog>



    <!-- 加载模态框 -->
    <div v-if="showLoadingModal" class="modal" style="z-index: 100000000 !important;">
      <div class="loading-container">
        <div class="loading-spinner"></div>
        <div class="loading-text">准备中，请稍后...</div>
        <div class="loading-timer">倒计时:{{ countdown }}秒</div>
      </div>
    </div>








  </div>
</template>

<script>
  import CountTo from 'vue-count-to'
  import Cookies from 'js-cookie'
  import Vue from 'vue';

  import Navv from "@/components/Navv";
  import SidebarTest from "@/components/SidebarTest";
  import * as Database from "@/api/system/database";
  import * as Auth from '@/utils/auth'
  import * as Games from "@/api/system/games";
  import * as Work from "@/api/operation/work";
  import MD5 from 'md5';




  export default {
    name: 'ToolCon',
    components: {
      CountTo,
      Navv,
      SidebarTest


    },
    data() {
      return {
        formLogger: {}, //登录器表单
        loggerShow: false, //登录器模态框
        ttt: 2,
        progress: 0,
        showLoadingModal: false,
        countdown: 60,
        // 日期范围
        dateRange: [],
        cut_show: 1,
        count: 0,
        title: '',
        ulid: '',
        userId: '',
        nickname: '',
        mysqlList: [],
        fileList: [],
        upload_url: process.env.VUE_APP_BASE_URL + "/file/upload",
        headers: Auth.getHeader(),
        logo: '',
        // 总条数
        total: 0,
        totalPc: 0,
        // 字典表格数据
        tableData: [],
        tableDataPc: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        openTest: false,
        engineList: [], //引擎列表
        bbhList: [], //版本号列表
        dljlx: [], //登录器类型



        gameList: [], //列表
        // 查询参数
        queryParams: {
          noPage: 1,
          pageSize: 10,
        },

        queryParamsPc: {
          noPage: 1,
          pageSize: 10,
          filter: {
            ulid: null,
            time: null,
          },
        },



        // 查询数据库参数
        queryParamsMysql: {
          noPage: 1,
          pageSize: 100
        },
        // 表单参数
        form: {},
        formtest: {
          title: '工具服测试',
          platform: null,
        },


        // 表单校验
        rules: {
          title: [{
            required: true,
            message: "区服名不能为空",
            trigger: "blur"
          }],
          serverIp: [{
            required: true,
            message: "ip不能为空",
            trigger: "blur"
          }],
          port: [{
            required: true,
            message: "端口不能为空",
            trigger: "blur"
          }],
        },


        // 表单校验
        rulestest: {
          title: [{
            required: true,
            message: "登录器名称不能为空",
            trigger: "blur"
          }],
          platform: [{
            required: true,
            message: "登录器类型不能为空",
            trigger: "blur"
          }],
          version: [{
            required: true,
            message: "登录器版本号不能为空",
            trigger: "blur"
          }],
          // game: [{
          //   required: true,
          //   message: "游戏不能为空",
          //   trigger: "blur"
          // }],
        },
        loading: false,
        loading_mysql: true,
        messageInstance: null,

        intervalId: null, // 用于存储 setInterval 的返回值，用于后续清除定时器
      }
    },
    created() {
      this.nickname = localStorage.getItem('username')
      this.userId = localStorage.getItem('user_id')

      this.getList()
      this.getEngineList()

      // this.generateConfig()//生成登陆器配置
      this.startRequest() //查询PC登录器列表
      // this.getPcList();

      // this.startProgress();


    },

    beforeDestroy() {
      // 在组件销毁前停止定时请求
      this.stopRequest();
    },

    mounted() {
      // this.startProgress();
    },
    methods: {

      /** 查询pc登录器列表*/
      getPcList() {
        this.queryParamsPc.type_pj = 1
        this.queryParamsPc.user = this.userId
        // this.loading = true;

        if (this.dateRange !== null && this.dateRange.length !== 0) {
          this.queryParamsPc.filter.time = this.dateRange
        }
        Work.getPcList(this.queryParamsPc).then(response => {
          this.tableDataPc = response.data.list;
          console.log('tableDataPc', this.tableDataPc)
          console.log('abc', response.data.isGenerate)
          if (response.data.isGenerate == 0) {
            this.stopRequest();
          }

          this.totalPc = response.data.pagination.totalCount;
          // this.loading = false;
        });
      },

      /** 删除按钮操作 */
      handleDeleteCsdlq(row) {
        var peres = {};
        peres.user = this.userId
        peres.type_pj = 1
        peres.ulid = row.ulid
        this.$modal.confirm('是否确认删除').then(function() {
          return Work.DeleteDlq(peres);
        }).then(() => {
          this.getPcList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {});
      },

      /** 更新登录器按钮操作 */
      renewalBut(row) {
        // this.formLogger.version = row.version;
        console.log('111111111111111', row);

        this.generateConfigUpdate(row.platform);
        this.loggerShow = true;
        this.$set(this.formLogger, 'version', row.lander_version.ulid)
        this.$set(this.formLogger, 'ulid', row.ulid)
      },


      //更新登录器提交表单
      loggerUpdateSut() {
        var peres = {};
        peres.user = this.userId
        peres.type_pj = 1
        peres.version = this.formLogger.version
        peres.ulid = this.formLogger.ulid
        Work.updateLogger(peres).then(response => {
          if (response.code == 200) {
            this.startRequest();
            this.$forceUpdate();
            this.$modal.msgSuccess(response.message);
          } else {
            this.$modal.msgWarning(response.message);
          }
        }).catch(() => {
          this.startRequest();
          this.$forceUpdate();
          this.$modal.msgWarning(response.message);
        });
        this.loggerShow = false;
        this.handleQuery();
      },




      startRequest() {
        this.getPcList();
        this.intervalId = setInterval(() => {
          this.getPcList();
        }, 5000); // 1秒钟请求一次，根据需要调整时间间隔 1000
      },
      stopRequest() {
        clearInterval(this.intervalId); // 清除定时器
      },

      // startProgress() {
      //   // 设置计时器，每100毫秒增加进度值
      //   this.progress = 0;

      //   setTimeout(() => {
      //     const timer = setInterval(() => {
      //       this.progress += 1
      //       if (this.progress >= 80) {
      //         clearInterval(timer)
      //       }
      //     }, 100)
      //   }, 3000)
      // },

      refetchData() {
        this.open = false;
        this.openTest = false;
      },

      showModal() {
        this.showLoadingModal = true;
        this.startCountdown();
      },
      startCountdown() {
        const timer = setInterval(() => {
          this.countdown--;
          if (this.countdown === 0) {
            clearInterval(timer);
            this.hideModal();
          }
        }, 1000);
      },
      hideModal() {
        this.showLoadingModal = false;
        this.countdown = 60;
      },

      handleClose() {
        if (this.messageInstance) {
          this.messageInstance.close();
        }
        this.openTest = false;

        this.cut_show = 3;

      },
      cut() {
        this.cut_show = 3
      },
      seltype() {
        // this.formtest.version = {}
        this.$set(this.formtest, 'version', [])

        // this.platform = this.formtest.platform
        this.generateConfig()
      },

      //获取引擎列表
      getEngineList() {
        this.loading = true;
        var peres = {}
        peres.type_pj = 1

        Database.engineList(peres).then((response) => {
          this.engineList = response.data.list
          this.loading = false;
        });
      },


      //获取生成登陆器配置---更新用
      generateConfigUpdate(platform) {
        // this.loading = true;
        var peres = {}
        peres.type_pj = 1
        peres.user = this.userId
        peres.platform = platform

        Database.generateConfig(peres).then((response) => {
          if (this.formtest.platform > -1) {
            this.bbhList = response.data.version
            console.log('aaa', this.bbhList);
            if (this.bbhList.length > 0) {
              this.$set(this.formtest, 'version', this.bbhList[0].value)
            }
          }
          this.gameList = response.data.game
          this.count = response.data.count
          // this.loading = false;
        });
      },


      //获取生成登陆器配置
      generateConfig() {
        // this.loading = true;
        var peres = {}
        peres.type_pj = 1
        peres.user = this.userId
        peres.platform = this.formtest.platform

        Database.generateConfig(peres).then((response) => {
          if (this.formtest.platform > -1) {
            this.bbhList = response.data.version
            console.log('aaa', this.bbhList);
            if (this.bbhList.length > 0) {
              this.$set(this.formtest, 'version', this.bbhList[0].value)
            }
          }
          this.gameList = response.data.game
          this.count = response.data.count
          // this.loading = false;
        });
      },


      /** 查询工具服列表 */
      getList() {
        this.queryParams.type_pj = 1
        this.queryParams.user = this.userId
        this.loading = true;
        this.loading_mysql = true;
        Work.getToolConList(this.queryParams).then(response => {
          this.tableData = response.data.list;
          this.total = response.data.pagination.totalCount;
          this.loading = false;
          this.loading_mysql = false;
        });
      },









      /** 查询PC登录器生成---状态*/
      getSelectState() {
        this.loading = true;
        var per = {
          user: this.userId,
          type_pj: 1,
          ulidArr: [10008, 10007]
        }
        Work.getSelectState(per).then(response => {
          // this.tableDataPc = response.data.list;
          console.log('response', response)
          this.loading = false;
        });
      },

      //区服列表刷新
      qfsx() {
        this.open = false;
        this.getList();
        this.$message({
          message: '刷新成功',
          type: 'success',
          center: true,
        });
      },



      /** 重置按钮操作 */
      resetQuery() {
        this.mysqlList = [];
        this.fileList = [];
        this.dateRange = [];
        this.queryParamsPc.filter.ulid = null,
          this.queryParamsPc.filter.time = null,
          this.open = false;
        this.openTest = false;
        this.resetForm("queryForm");
        this.handleQuery();
        this.$message({
          message: '刷新成功',
          type: 'success',
          center: true,
        });
      },

      //查询数据库列表
      getMysqlList() {
        Database.getList(this.queryParamsMysql).then(response => {
          this.mysqlList = response.data.rows;
        });
      },

      handleChange(file, fileList) {
        this.fileList = fileList.slice(-1);
      },

      handleSetHeaders() {
        this.headers = Auth.getHeader();
      },
      /****文件上传*****/
      handleFileSuccess(res) {
        this.$set(this.form, "logo", res.data)
      },

      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParamsPc.noPage = 1;
        this.getPcList();

      },

      handleRemove(file, fileList) {
        this.fileList = []
        this.form.file_addr = ''
        this.form.file_name = ''
      },

      //提示器
      tsq() {
        if (this.formtest.platform == '-1') {
          this.$message({
            message: '请先选择登录器类型',
            type: 'warning',
          });
        }
      },

      /** 提交按钮 */
      submitForm: function() {
        this.$refs['form'].validate(valid => {
          if (valid) {

            const loading = this.$loading({
              lock: true,
              text: '请稍后.....',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.7)'
            });

            if (this.form.ulid != undefined) {
              this.form.user = this.userId;
              this.form.type_pj = 1;

              this.loading = true;
              Work.UpdateWork(this.form).then(response => {
                this.$modal.msgSuccess('修改成功');
                this.open = false;
                this.loading = false;
                loading.close();
                this.getList();
              }).catch(error => {
                this.loading = false;
                loading.close();
              });
            } else {


              this.form.user = this.userId
              this.form.type_pj = 1


              this.loading = true;
              Work.AddWork(this.form).then(response => {
                this.$modal.msgSuccess('新增成功');
                this.open = false;
                this.loading = false;
                loading.close();
                this.getList();
              }).catch(error => {
                console.log('this.tableData.length', this.tableData.length)
                if (this.tableData.length > 0) {
                  var n1 = this.tableData[0]['title'];
                  var n2 = n1.slice(3)
                  var n3 = Number(n2) + 2;
                  var title = '工具服' + n3;
                } else {
                  var title = '工具服1';
                }
                this.$set(this.form, 'title', title);

                this.loading = false;
                loading.close();
              });
            }
          }
        });
      },



      // 从本地获取数据
      submitFormTest: function() {
        this.$refs['formtest'].validate(valid => {
          if (valid) {
            var peres = {};
            peres.user = this.userId
            peres.title = this.formtest.title
            peres.platform = this.formtest.platform
            peres.version = this.formtest.version
            if (this.formtest.game) {
              peres.game = this.formtest.game
            }
            peres.type_pj = 1
            Work.generate(peres).then(response => {
              if (response.code == 200) {
                // this.getPcList();
                this.startRequest();
                this.generateConfig()
                this.openTest = false;
                this.$forceUpdate(); // 触发组件的重新渲染
              } else {
                this.ttt = 1;
                this.openTest = false;
                this.$forceUpdate(); // 触发组件的重新渲染
              }
            }).catch(() => {
              this.ttt = 1;
              // this.getPcList();
              this.startRequest();
              this.generateConfig();
              this.openTest = false;
            });
          }
        });
      },




      // submitFormTest: function() {
      //   this.$refs['formtest'].validate(valid => {
      //     if (valid) {
      //       this.showModal();
      //       var peres = {};
      //       peres.user = this.userId
      //       peres.title = this.formtest.title
      //       peres.platform = this.formtest.platform
      //       peres.version = this.formtest.version
      //       if (this.formtest.game) {
      //         peres.game = this.formtest.game
      //       }
      //       peres.type_pj = 1
      //       // 设置超时时间为2分钟 (120000 毫秒)
      //       const timeout = 120000;
      //       // const timeout = 15000;

      //       // 创建一个 Promise 对象
      //       const generatePromise = new Promise((resolve, reject) => {
      //         Work.generate(peres).then(response => {
      //           if (response.code == 200) {
      //             resolve(response);
      //           } else {
      //             reject(response);
      //           }
      //         }).catch(error => {
      //           reject(error);
      //         });
      //       });
      //       // 设置超时
      //       const timeoutPromise = new Promise((resolve, reject) => {
      //         setTimeout(() => {
      //           // loading.close();
      //           this.showLoadingModal = false;
      //           reject(new Error("生成失败，请稍后重试..."));

      //         }, timeout);
      //       });
      //       // 同时执行 Promise 对象和超时 Promise 对象
      //       Promise.race([generatePromise, timeoutPromise])
      //         .then(response => {
      //           this.showLoadingModal = false;
      //           // this.$modal.msgSuccess(response.message);
      //           this.$modal.msgSuccess('生成成功');
      //           this.openTest = false;
      //           this.cut_show = 3;
      //           this.getPcList();
      //           this.generateConfig();
      //         }).catch(error => {
      //           // this.$modal.msgWarning(error.message);
      //           this.messageInstance = this.$message({
      //             message: '生成失败，请稍后重试...',
      //             type: 'warning',
      //             showClose: true,
      //             duration: 5
      //           });

      //         }).finally(() => {
      //           this.showLoadingModal = false;
      //           this.cut_show = 3;
      //         });

      //     }
      //   });
      // },

      //生成测试登录器---按钮
      handleTestBut() {

        this.cut_show = 3;
        this.formtest = {
            platform: '0',
            title: '工具服测试'
          },
          this.seltype();
        if (this.userId == 10001) {
          this.dljlx = [{
              label: "PC",
              value: "0"
            },
            {
              label: "Android",
              value: "1"
            }
          ];
        } else {
          this.dljlx = [{
            label: "PC",
            value: "0"
          }, ];
        }
        this.openTest = true;
      },


      //生成测试登录器---提交
      handleTest() {
        var peres = {};
        peres.user = this.userId
        peres.type_pj = 1
        Work.generate(peres).then(response => {
          if (response.code == 200) {
            this.$modal.msgSuccess(response.message);
          } else {
            this.$modal.msgWarning(response.message);
          }
        }).catch(() => {
          this.$modal.msgWarning(response.message);
        });
      },

      //下载登录器
      handleDownload(row) {
        var peres = {};
        peres.user = this.userId
        peres.type_pj = 1
        peres.lander = row.ulid
        Work.download(peres).then(response => {

          if (response.code == 200) {
            var filePath = response.data.downUrl
            // var filePath = 'http://scofficial.oss-cn-chengdu.aliyuncs.com/uploads/2023_08_05/e08cfbff9766bb14e5d938d478f730a1.zip'

            // 创建隐藏的<a>标签并设置href为文件路径
            const link = document.createElement('a');
            link.href = filePath;
            link.target = '_blank';

            // 使用download属性指定文件名
            // link.download = 'filename.ext';

            // 触发点击事件进行下载
            link.dispatchEvent(new MouseEvent('click'));

            this.$modal.msgSuccess(response.message);
          } else {
            this.$modal.msgWarning(response.message);
          }
        }).catch(() => {
          this.$modal.msgWarning('下载失败');
        });
      },

      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        this.title = '修改工具服'
        this.ulid = row.ulid
        var peres = {};
        peres.ulid = row.ulid
        peres.type_pj = 1



        Work.getToolConInfo(peres).then(response => {


          this.$set(this.form, 'ulid', response.data.info.ulid)
          this.$set(this.form, 'title', response.data.info.title)
          this.$set(this.form, 'serverIp', response.data.info.ip)
          this.$set(this.form, 'port', response.data.info.port)
          this.$set(this.form, 'remark', response.data.info.remark)
          this.$set(this.form, 'engineVersion', response.data.info.engine_version.ulid)

          // this.form.engineVersion = response.data.info.engine_version.title;
          // this.form.remark = response.data.info.remark;
          this.open = true;
        });
      },

      /** 删除按钮操作 */
      handleDelete(row) {
        var _this = this;
        this.$modal.confirm('是否确认删除').then(function() {
          var peres = {};
          peres.user = _this.userId
          peres.ulid = row.ulid
          peres.type_pj = 1
          return Work.DeleteWork(peres);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {});
      },




      /** 新增按钮操作 */
      handleAdd() {
        this.loading = false;
        this.cut_show = 1;
        if (this.tableData.length >= 10) {
          this.$modal.msgWarning("最多增加5个");
          return
        }
        this.reset();
        this.open = true;
        this.title = "添加工具服配置";
        if (this.tableData.length > 0) {
          var n1 = this.tableData[0]['title'];
          var n2 = n1.slice(3)
          var n3 = Number(n2) + 1;
          var title = '工具服' + n3;
        } else {
          var title = '工具服1';
        }
        this.$set(this.form, 'title', title);
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.fileList = [];
        this.form = {};
        this.resetForm("form");
      },

      qfgjfqh(num) {
        this.cut_show = num;
        this.open = false;
        this.openTest = false;
      },

      //生成随机数
      createCode() {
        let code = ''; //声明一个空的字符串值用于后面赋值
        const codeLength = 16; //验证码的长度，可以根据个人需求改变
        const random = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M',
          'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
        ]; //随机数的取值范围
        for (let i = 0; i < codeLength; i++) {
          //循环遍历codeLength，值是几，就循环几次
          let index = Math.floor(Math.random() *
            36); //Math.floor方法用于返回小于或等于一个给定数字的最大整数；Math.random方法返回 0（含）和 1（不含）之间的随机数
          code += random[index]; //根据索引取得随机数加到code上
        }
        this.form.version = code; //把code值赋给data中定义好的appid
      },

    }
  }
</script>

<style lang="scss" scoped>
  .pagss {
    height: 100%;
    background: #fff;
  }

  .avatar {
    width: 78px;
    height: 78px;
    display: block;
  }

  .panel-group1 {
    padding: 25px;
    margin-top: 18px;
    margin-bottom: 0px;
    margin-right: 15px;
    min-height: 220px;
    background: #FFFFFF;
    border-radius: 10px 10px 10px 10px;
    opacity: 1;
  }

  .panel-group2 {
    // padding: 25px;
    // margin-top: 18px;
    margin-bottom: 0px;
    // margin-right: 15px;
    // height: 800px;
    background: #FFFFFF;
    // border-radius: 10px 10px 10px 10px;
    opacity: 1;
  }


  .avatar-uploader-icon {
    font-size: 28px;
    color: #000000;
    width: 78px;
    height: 78px;
    line-height: 78px;
    text-align: center;
    background-color: #F4F4F5;
  }


  ::v-deep .el-divider--vertical {
    height: 100px;
  }

  ::v-deep .pagination-container .el-pagination {

    position: relative;
  }

  ::v-deep .el-form-item__content {
    // margin-left: 40px !important;
  }

  ::v-deep .el-textarea__inner {
    min-height: 36px !important;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .yhbox {
    padding: 20px;
    width: 320px;
    height: 120px;
    background: #FFFFFF;
    // background: red;
    border-radius: 4px 4px 4px 4px;
    opacity: 1;
    border: 1px solid #BBBBBB;
  }

  ::v-deep .el-dialog__header {
    padding: 20px;
    padding-bottom: 0;
  }

  ::v-deep .el-tabs__item.is-active {
    color: #ad24cd;
  }

  ::v-deep .el-button:hover,
  .el-button:focus {
    color: #000000;
    border-color: #A5EDF1;
    background-color: #A5EDF1;
  }

  .txxbutton {
    ::v-deep .el-button--medium {
      width: 146px;
      height: 52px;
      padding: 10px 20px;
      font-size: 20px;
      border-radius: 4px;
    }
  }

  .pitch {
    background: #3FC1C9 !important;
    color: #fff !important;
  }

  .mcc {
    ::v-deep .el-input--medium .el-input__inner {
      background: #F3F3F4;
    }
  }

  .mr5 {
    margin-right: 50px;
  }

  .modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;

  }

  .loading-container {
    text-align: center;

  }

  .loading-spinner {
    /* 添加加载图标的样式 */
  }

  .loading-text {
    margin-top: 50%;
    color: #001297;
  }

  .loading-timer {
    margin-top: 10px;
    font-size: 20px;
    color: #001297;
  }
</style>
